<template>
    <ex-dialog
      width="800px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <template>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm" :disabled="disabled">
            <el-form-item label="服务项目：" prop="serviceItemId">
                <el-select v-model="ruleForm.serviceItemId" filterable placeholder="请选择" :style="{width: inputWidth}" @change="serviceItemIdChange">
                    <el-option v-for="item in serviceItemsOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务客户：" prop="clientId" v-if="!isMultiple" :key="1">
                <el-select v-model="ruleForm.clientId" filterable placeholder="请选择" :style="{width: inputWidth}" @change="clientIdChange">
                    <el-option v-for="item in servingCustomersOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务客户：" prop="clientIdList" v-if="isMultiple" :key="2">
                <el-select v-model="ruleForm.clientIdList" multiple filterable placeholder="请选择" :style="{width: inputWidth}" @change="clientIdChange">
                    <el-option v-for="item in servingCustomersOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <div class="form_item" v-if="ruleForm.serviceItemId!=''&& ((isMultiple && ruleForm.clientIdList.length!=0)||(!isMultiple && ruleForm.clientId!=''))">
                <div class="form_item_label">服务环节：</div>
                <div class="form_item_detail">
                    <el-steps :active="0" direction="vertical" :space="100">
                        <el-step :title="item.serviceItemLinkName + '(' + (item.responsiblePerson==''?item.authorityTypeDict:item.responsiblePerson) + ')'" :description="item.description" v-for="(item,index) in stepList" :key="index">
                        <!-- <template slot="description">
                            <div>{{item.time}}</div>
                            <div>{{item.description}}</div>
                        </template> -->
                        </el-step>
                    </el-steps>
                </div>
            </div>
            <el-form-item label="服务需求说明：" prop="description">
              <el-input type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入" v-model="ruleForm.description" :style="{width: inputWidth}"></el-input>
            </el-form-item>    
          </el-form>
        </template>
      </div>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">保存提交</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    servingCustomers,serviceItemsLs,listByServiceItemIdAndClientId,addServiceRecord
  } from "@/api/customer/serviceManage";
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      return {
        labelWidth: "120px",
        inputWidth: "420px",
        title: "新增/确认服务单",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          clientIdList:[],//客户档案id集合
          clientId: '',//客户档案id
          serviceItemId: '',//服务项目id
          description:'',//服务需求说明
        },
        rules: {
          clientId: [
            { required: true,message: "请选择服务客户",trigger: ["change", "bulr"]}
          ],
          serviceItemId: [
            { required: true,message: "请选择服务项目",trigger: ["change", "bulr"]}
          ],
          clientIdList: [
            { required: true,message: "请选择服务客户",trigger: ["change"]}
          ],
          description: [
            { required: true,message: "请输入服务需求说明",trigger: ["change", "bulr"]}
          ],
        },
        stepList:[],//步骤数组
        servingCustomersOptions:[],//服务客户下拉
        serviceItemsOptions:[],//服务项目下拉
        isMultiple: false,//是否可以多选（串场直播时可以多选）
        signStatus:'',//签约状态 1 待签约 2 已签约
        addServiceCountType:'1',//记入服务次数类型 1 是 2否
      };
    },
    computed: {},
    created() {
      this.getServiceItemsLs()
      // this.getServingCustomers()
    },
    mounted() {
     
    },
    computed: {},
    methods: {
      //服务客户下拉
      getServingCustomers() {
        if(this.addServiceCountType!='2'){
          this.signStatus = '2'
        }else{
          this.signStatus = ''
        }
        let data = {
          signStatus: this.signStatus
        }
        servingCustomers(data).then((res) => {
            this.ruleForm.clientId = ''
            this.ruleForm.clientIdList = []
            this.servingCustomersOptions = res.result
        })
      },
      //获取服务项目
      getServiceItemsLs(){
        serviceItemsLs().then(res => {
          this.serviceItemsOptions = res.result
        })
      },
      //服务环节
      getListByServiceItemIdAndClientId(){
        let data = {
          clientId: this.ruleForm.clientId,
          serviceItemId: this.ruleForm.serviceItemId
        }
        listByServiceItemIdAndClientId(data).then(res => {
          this.stepList = res.result
        })
      },
      //服务客户选择
      clientIdChange(e){
        if(this.isMultiple && this.ruleForm.clientIdList.length==0){
          this.stepList = []
        }
        if(this.ruleForm.serviceItemId!=''&& ((this.isMultiple == true && this.ruleForm.clientIdList.length!=0)||(this.isMultiple == false && this.ruleForm.clientId!=''))){
          this.getListByServiceItemIdAndClientId()
        }
      },
      //服务项目选择
      serviceItemIdChange(e){
        this.serviceItemsOptions.forEach((item)=>{
          if(item.id==e && item.serviceCountType=='2'){ //该情况为串场直播状态
            this.isMultiple = true
          }else if(item.id==e && item.serviceCountType!='2'){
            this.isMultiple = false
          }
          if(item.id==e && item.addServiceCountType=='1'){ //判断记入服务次数类型 1 是 2否
            this.addServiceCountType = '1'
          }else if(item.id==e && item.addServiceCountType=='2'){
            this.addServiceCountType = '2'
          }
        })
        this.getServingCustomers()
        if(this.isMultiple && this.ruleForm.clientIdList.length==0){
          this.stepList = []
        }
        if(this.ruleForm.serviceItemId!=''&& ((this.isMultiple == true && this.ruleForm.clientIdList.length!=0)||(this.isMultiple == false && this.ruleForm.clientId!=''))){
          this.getListByServiceItemIdAndClientId()
        }
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            if(!this.isMultiple){
              this.ruleForm.clientIdList = []
              this.ruleForm.clientIdList.push(this.ruleForm.clientId)
            }
            // console.log(this.ruleForm)
            // return
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            addServiceRecord(data).then(res => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .el-radio-group{
    display: flex;
    flex-direction: column;
    .el-radio{
      margin-bottom: 14px;
    }
  }
  .form_item{
    display: flex;
  }
  .form_item_label{
    margin-left: 38px;
    color: #606266;
    font-size: 14px;
    font-weight: bold;
  }
  .form_item_detail{
    margin-left: 10px;
  }
  </style>
  